<template>
	<view class="pageview">
		<cl-navbar leftIconSize="40rpx" placeholder autoBack>
			<template slot="right">
				<text style="font-size: 28rpx;" @click="editClick">{{isEdit?$t("common.cancelText"):$t("common.edit")}}</text> 
			</template>
		</cl-navbar>
		<view>
			<view class="cellviewGrop">
				<view class="cellviewGrop__left">
					<cl-avatar :src="user_info.avatar_url" size="100rpx"></cl-avatar>
					<view class="cellviewGrop__left__right">
						<text class="cellviewGrop__left__right__name">{{user_info.nick_name}}</text>
						<text class="cellviewGrop__left__right__username">{{user_info.login_name}}</text>
					</view>
				</view>
				<view class="cellviewGrop__right">
					<view style="width: 15rpx;height: 15rpx;border-radius: 8rpx;background-color: #0dab18;"></view>
					<!-- //当前账号 -->
					<text style="font-size: 24rpx;margin-left: 8rpx;">{{$t('my_file.setting.toggle.currentAccount')}}</text>
				</view>
			</view>
			<template v-for="(item,index) in accounts" >
				<view class="cellviewGrop" :key="item.login_name" v-if="user_info.login_name != item.login_name" @click="login(item)">
					<view class="cellviewGrop__left">
						<u-icon name="minus-circle-fill" color="#ff4242" size="20" style="margin-right: 20rpx;" v-if="isEdit"></u-icon>
						<cl-avatar :src="item.avatar_url" size="100rpx"></cl-avatar>
						<view class="cellviewGrop__left__right">
							<text class="cellviewGrop__left__right__name">{{item.nick_name}}</text>
							<text class="cellviewGrop__left__right__username">{{item.login_name}}</text>
						</view>
					</view>
				</view>
			</template>
			<view class="cellviewGrop" @click="add">
				<view class="cellviewGrop__left">
					<image src="/static/icon/add.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
					<view class="cellviewGrop__left__right">
						<text class="cellviewGrop__left__right__name">{{$t("my_file.setting.toggle.addAccount")}}</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<cl-model ref="clGoogle">
				<view class="yanzheng">
					<text>{{$t("login.login.googleCode")}}</text>
					<view class="googleView">
						<u-input
							:customStyle="{backgroundColor:'#343545',height:'88rpx',padding:'0 20rpx',borderRadius: '20rpx'}"
							color="#ffffff" :adjustPosition="false" v-model="fromdata.google_code" border="none"
							focus></u-input>
					</view>
				</view>
			</cl-model>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import msgSqlite from "@/sqlite_services/msg.js"
	import commonApi from "@/services/api/common.js";
	export default {
		name: 'my_setting_toggle',
		data() {
			return {
				accounts:[],
				fromdata: {
					login_name: '',
					login_pwd: '',
					google_code: undefined,
				},
				isEdit:false
			}
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			})
		},
		onLoad() {
			this.accounts = uni.getStorageSync('accounts') || [];
		},
		onShow() {
		},
		methods: {
			editClick(){
				this.isEdit = !this.isEdit
			},
			async login(item){
				if(this.isEdit){
					let index = this.accounts.findIndex(it=>it.login_name == item.login_name)
					if(index != -1){
						this.accounts.splice(index,1)
						uni.setStorageSync('accounts',this.accounts)
					}
					return
				}
				this.fromdata.login_name = item.login_name
				if(item.login_type != 'auto'){
					this.fromdata.login_pwd = item.login_pwd
				}
				this.confirmLogin(item.login_type)
			},
			add(){
				this.$Router.push({
					name: 'login'
				});
			},
			async confirmLogin(login_type) {
				if(login_type != 'auto'){
					try {
						let updata = JSON.parse(JSON.stringify(this.fromdata))
						let res = await this.$api.user.login({
							...updata,
							...this.$store.state.user.deviceInfo
						})
						if (res) {
							let saveData = {
								...res.data.user_info,
								login_pwd:this.fromdata.login_pwd
							}
							this.saveOrUpdateAccountInfo(saveData)
							if (res.data.is_auth) {
								this.$refs.clGoogle.show({
									confirmText: this.$t("login.login.title"),
									cancelText: this.$t("common.cancelText"),
									confirm: async (e) => {
										try {
											this.confirmLogin()
											e.showModel = false
										} catch (e) {}
									},
									close: () => {}
								})
							} else {
								uni.showLoading({
									title: this.$t("api.loading.msg.loginNest")
								})
								await this.$store.dispatch('loginNest', {
									data:res.data
								})
								uni.hideLoading()
								this.$u.toast(this.$t('login.login.success'));
								this.$Router.pushTab({
									name: 'index'
								});
							}
						}else{
							this.fromdata.google_code = undefined
						}
					} catch (e) {
						this.fromdata.google_code = undefined
					}
				}else{
					try{
						await this.$store.dispatch('autoLogin')
						this.$Router.pushTab({
							name: 'index'
						});
					}catch(e){
						//TODO handle the exception
					}
				}
				
			},
			// 更新或保存账号信息
			saveOrUpdateAccountInfo(accountInfo,login_type) {
			    let accounts = uni.getStorageSync('accounts') || [];
			    const index = accounts.findIndex(account => account.login_name == accountInfo.login_name);
			    if (index !== -1) {
			        accounts[index] = accountInfo;
			    } else {
			        accounts.push(accountInfo);
			    }
			    uni.setStorageSync('accounts', accounts);
			}
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		&__left{
			display: flex;
			align-items: center;
			&__right{
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				&__name{
					font-size: 30rpx;
				}
				&__username{
					font-size: 28rpx;
					color: #595A66;
				}
			}
		}
		&__right{
			align-self: self-start;
			display: flex;
			align-items: center;
		}
	}
</style>